<template>
  <!-- 背景图片 -->
  <div class="publicity-img">
    <img :src="detaillist.Imgurl" alt="" />
    <div class="van-sticky">
      <img src="@\assets\images\return.png" alt="" @click="back" />
      <img src="@\assets\images\maohao.png" alt="" />
    </div>
  </div>
  <div class="app-detail">
    <img :src="detaillist.Imgurl" alt="" />
    <header>
      <img :src="detaillist.url" alt="" />
      <div class="header-banner__text-wrap">
        <p class="header-banner__title">{{ detaillist.title }}</p>
        <p class="header-banner__desc">
          <span>开发者目录</span>
        </p>
      </div>
    </header>
  </div>
  <div class="score-wrap" v-if="detaillist.id">
    <div class="people-num">
      <p>
        <span class="color-c">{{ detaillist.manufact[0] }}</span>
        <span class="color-9">{{ detaillist.manufact[1] }}</span>
      </p>
      <p>
        <span class="color-c">下载</span>
        <span class="color-9 margin-12">{{ detaillist.download }}</span>
        <span class="color-c">关注</span>
        <span class="color-9">{{ detaillist.attention2 }}</span>
      </p>
    </div>
    <div class="score">
      <img src="@\assets\images\logintaptap.png" alt="" />
      <span>{{ detaillist.score }}</span>
    </div>
  </div>
  <div class="inform" v-if="detaillist.updata">
    <img src="@\assets\images\msg2.png" alt="" />
    <van-notice-bar
      color="#333"
      background="#f5f5f5"
      mode="link"
      class="van-ellipsis"
    >
      {{ detaillist.updata }}
    </van-notice-bar>
  </div>
  <div class="gain">
    <button @click="save(detaillist.id)">获取</button>
  </div>
  <Info />
</template>

<script>
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { computed, onMounted, nextTick } from "vue";
import { useStore } from "vuex";
import BScroll from "better-scroll";
import Info from "@/components/detail/Info.vue";
import { Toast } from "vant";
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    //点击返回键返回上一页
    const back = () => {
      router.go(-1);
    };

    //获取store对象
    const store = useStore();
    //触发actions的方法
    const getDetailList = (val) =>
      store.dispatch("getDetailList", {
        id: val || route.params.id,
      });
    //获取详情页数据
    const detaillist = computed(() => store.state.detail.detaillist);
    onMounted(() => {
      getDetailList().then(async () => {
        await nextTick();
        new BScroll(".tally1", {
          scrollX: true,
          scrollY: false,
        });
      });
    });

    //仅更新id时
    onBeforeRouteUpdate(async (to) => {
      //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
      //重新获取数据并渲染，且需要重新执行better-scroll
      getDetailList(to.params.id).then(async () => {
        await nextTick();
        new BScroll(".tally1", {
          scrollX: true,
          scrollY: false,
        });
      });
    });

    const save = (id) => {
      let arr = [];
      if (!localStorage.getItem("id")) {
        arr.push(id);
        localStorage.setItem("id", JSON.stringify(arr));
      } else {
        let newArr = JSON.parse(localStorage.getItem("id"));
        if (!newArr.includes(id)) {
          newArr.push(id);
          localStorage.setItem("id", JSON.stringify(newArr));
        }
      }
      Toast.loading({
        message: "下载中...",
        forbidClick: true,
      });
    };
    return {
      back,
      detaillist,
      getDetailList,
      route,
      save,
    };
  },
  components: {
    Info,
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/var.less";
.publicity-img {
  width: 100%;
  height: 183px;
  position: relative;
  & > img {
    width: 100%;
    height: 100%;
  }
  .van-sticky {
    width: 100%;
    height: 56px;
    position: absolute;
    left: 0;
    top: 0;
    .flex(space-between, center);
    padding: 0 15px;
    img {
      width: 33px;
      height: 33px;
    }
  }
}
.app-detail {
  width: 100%;
  height: 87px;
  overflow: hidden;
  position: relative;
  & > img {
    width: 100%;
    height: 183px;
    transform: scaleY(-1);
  }
  header {
    width: 100%;
    height: 87px;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      rgba(114, 102, 104, 0.3);
    backdrop-filter: blur(15px);
    z-index: 999;
    padding: 9px 0 11px 17px;
    display: flex;
    & > img {
      width: 67px;
      height: 67px;
    }
  }
  .header-banner__text-wrap {
    color: #fff;
    margin-left: 13px;
    .header-banner__title {
      font-size: 24px;
      padding: 9px 0;
    }
    .header-banner__desc {
      font-size: 12px;
      padding-top: 4px;
      span {
        display: inline-block;
        width: 77px;
        height: 15px;
        text-align: right;
        color: #34c3c6;
        background: url("../assets/images/developer.png") no-repeat 0 0;
        background-size: contain;
      }
    }
  }
}
.score-wrap {
  height: 66px;
  .flex(space-between, center);
  padding: 0 17px;
  font-size: 12px;
  .people-num {
    p {
      padding: 5px 0;
      .color-c {
        color: #ccc;
        margin-right: 9px;
      }
      .color-9 {
        color: #999;
      }
      .margin-12 {
        margin-right: 12px;
      }
    }
  }
  .score {
    width: 40px;
    img {
      width: 40px;
      height: 12px;
    }
    span {
      font-size: 24px;
      color: #34c3c6;
      padding-top: 6px;
    }
  }
}
.inform {
  height: 38px;
  padding: 0 17px;
  .flex(space-between, center);
  & > img {
    width: 16px;
    height: 17px;
  }
  .van-notice-bar {
    width: 314px;
    height: 38px;
    padding: 0 10px;
    border-radius: 4px;
  }
}
.gain {
  height: 40px;
  margin-top: 15px;
  .flex();
  button {
    width: 340px;
    height: 40px;
    border: none;
    color: #fff;
    font-size: 20px;
    border-radius: 20px;
    background-color: #34c3c6;
  }
}
</style>
